<template>
    <div class="content" :style="contentStyle">
        <!--        找到所有意象-->
        <v-touch class="article" v-for="(article,index) in item.articles" :key="index"
        :style="articleStyle(article)" @tap="articleTouch(article,index,$event)">
        </v-touch>
        <div class="time">{{this.timeCount}}</div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    export default {
        mixins: [mixins],
        data(){
            return{
                articleCount: 0,
                timeCount: 78799,
                timer: null,
                isFinished: false
            }
        },
        beforeMount() {
            if(this.item.isFinish){
                this.isFinished = true
                return
            } else {
                this.item.articles.forEach(item => {
                    this.$set(item,'isTouch',false)
                })
            }
        },
        mounted() {
           this.timer = setInterval(()=>{
               this.timeCount--
               if(this.timeCount === 0) {
                   clearInterval(this.timer)
                   //时间到了没有找到全部物品
                   if(this.articleCount < this.item.articles.length){
                       this.losMusic()
                       if(this.isSeedEntery){
                           setTimeout(()=>{this.$emit('nextAssignment')},600)
                       } else {
                           this.$emit("losShow")
                       }
                       this.addAnswer({
                           id: this.item.id,
                           type: false
                       })
                   }
               }
           },1000)
        },
        destroyed() {
          clearInterval(this.timer)
        },
        computed:{
            //元素属性
            articleStyle(article) {
                return function (article) {
                    return {
                        position: "absolute",
                        background: "url(" + article.imageUrl + ")center center/contain no-repeat",
                        width: article.width,
                        height: article.height,
                        left: article.isTouch ? '' : article.left,
                        top: article.isTouch ? '' : article.top,
                        right: article.isTouch ? '10vh' : '',
                        bottom: article.isTouch ? '15vh' : '',
                        zIndex: article.isFront ? 99 : 98,
                        transform: article.isTouch ? 'scale(0)' : '',
                        transition: 'all 1s'
                    }
                }
            },
        },
        methods:{
            articleTouch: function (article, index, event) {
                if (this.item.isFinish || article.isLos || article.isTouch) {
                    return
                }
                this.$set(article, 'isTouch', true)
                this.articleCount++
                this.setFireworkPlay(event)
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                //全部找到
                if (this.articleCount === this.item.articles.length && this.timeCount >= 0) {
                    if(this.isSeedEntery){
                        this.isFinished = true
                        setTimeout(()=>{
                            this.setSucLottiePlay() },800)
                    }else {
                        this.isFinished = true
                        setTimeout(()=>{
                            this.perfectMusic()
                            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                        },800)
                    }
                    setTimeout(()=>{
                        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                        this.addAnswer({
                            id: this.item.id,
                            type: true
                        })
                    },3000)

                }

            },
        }
    }
</script>

<style scoped lang="stylus">
@import '../../../common/stylus/content.styl'
    .time
        $coord('WHRB',8rem,5rem,2rem,2rem)
        transform translate(var(--X), var(--Y))
        background url($urlTitle + 'assignment/image/page18/剩余时间背景.png')0 0/100% 100%
        font-size 2rem
        letter-spacing 0.2rem
        color #f009
        line-height 6.5rem
        text-align center
        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
</style>
